<template>
    <div class="login">
        <div class="loginCenter">
            <div class="loginLeft">
                <div class="login-head">
                    <div class="LogoImg1"><img src="~assets/images/loginLogo.png" /></div>
                </div>
            </div>
            <div class="loginRight">
                <h2>用户登录</h2>
                <div class="login-form">
                    <a-form :form="form">
                        <div style="display: block; opacity: 0; width: 0; height: 0; overflow: hidden">
                            <a-input type="text" name="username" autocomplete="off"></a-input>
                            <a-input type="password" name="password" autocomplete="off"></a-input>
                        </div>
                        <a-form-item>
                            <a-input name="a" type="password" placeholder="密码"
                                     style="position: fixed; bottom: -99999px"></a-input>
                            <a-input
                                    :disabled="btnLoading" ref="refocus"
                                    placeholder="请输入用户名"
                                    size="large"
                                    autocomplete="off"
                                    v-decorator="[
                                'userName',
                                {
                                    rules: [{ required: true, message: '请输入用户名' }],
                                    getValueFromEvent: event => {
                                        return this.verify.formalSpace(event)
                                    }
                                }
                            ]"
                            >
                                <em slot="prefix" class="coin name" />
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input
                                    :disabled="btnLoading"
                                    type="password"
                                    size="large"
                                    placeholder="请输入密码"
                                    @pressEnter="handleSubmit"
                                    autocomplete="off"
                                    style="color: #1f2f40;-webkit-text-security:disc; text-security:disc;ime-mode: disabled;"
                                    onpaste="return false"
                                    oncopy="return false"
                                    oncut="return false"
                                    @focus="changePwd"
                                    @blur="changePwd"
                                    @change="changePwd"
                                    v-decorator="[
                                'password',
                                {
                                    rules: [{ required: true, message: '请输入密码' }],
                                    getValueFromEvent: event => {
                                        return this.verify.formalSpace(event)
                                    }
                                }
                            ]"
                            >
                                <em slot="prefix" class="coin msg" />
                            </a-input>
                        </a-form-item>
                    </a-form>
                    <div class="btnError">
                        <div class="error" v-if="msg !== ''">{{ msg }}</div>
                        <a-button html-type="submit" :disabled="btnLoading" @click="handleSubmit" size="large"
                                  class="loginBtn">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
                        </a-button>
                    </div>
                </div>
            </div>
            <div class="copyRight">© AASTU</div>
        </div>
    </div>
</template>
<script>
    import verify from 'libs/verify'
    const shajs = require ('sha.js')
    import { mapState } from 'vuex'
    export default {
            data () {
            return {
                baseForm: {
                    userName: '',
                    password: '',
                    user: '',
                    passwd: '',
                    deviceId: '',
                    deviceId2: '',
                    passwd2: '',
                    passwd3: ''
                },
                verify,
                btnLoading: false,
                form: this.$form.createForm (this),
                msg: '用户名或密码错误',
                title: '',
                pwdType: 'password', // 密码框显示密码的控制
                eyeStatusName: 'eye-disabled', // 密码框显示密码的图标展示控制
                btnDisabled: false,
            }
        },
        methods: {
            changePwd(){
                this.msg = ''
            },
            /**
             * Function    : init
             * Description : 初始化清空sessionStorage和localStorage数据
             * Input       : none
             * Return      : none
             */
            init () {
                //获取当前系统名称
                if (sessionStorage.getItem ('interceptorMsg') !== null) {
                    this.msg = sessionStorage.getItem ('interceptorMsg')
                    sessionStorage.removeItem ('interceptorMsg')
                    sessionStorage.clear ()
                } else {
                    sessionStorage.clear ()
                    sessionStorage.clear ()
                }
                if (localStorage.getItem ('interceptorMsg') !== null) {
                    this.$message.success (localStorage.getItem ('interceptorMsg'),10)
                    localStorage.clear ()
                } else {
                    localStorage.clear ()
                }
                let _this = this;
                //获取当前系统模式
                this.$get('/config/getMode').then(res => {
                    if (res.code === 0) {
                        sessionStorage.setItem ('mode', response.data.mode)
                    } else {
                        _this.msg = res.message;
                    }
                }).catch(res => {
                    _this.msg = "";
                })
            },

            /**
             * Function    : handleSubmit
             * Description : 登录提交
             * Input       : none
             * Return      : none
             */
            handleSubmit () {
                this.msg = ''
                this.btnLoading = true
                this.btnDisabled = true;
                let _this = this
                this.form.validateFields (( err, value ) => {
                    if (!err) {
                        this.baseForm.userName = value.userName
                        this.baseForm.password = shajs ('sha256').update (value.password).digest ('base64')
                        _this.$post('/confirmLogin',this.baseForm).then(response => {
                            if (response.code === 0) {
                                this.msg = ''
                                let token = response.data.token
                                let roleType = response.data.roleType
                                sessionStorage.setItem ('user', this.baseForm.userName)
                                sessionStorage.setItem ('token', token)
                                sessionStorage.setItem ('roleType', roleType)
                                if(roleType === '1'){
                                    this.$router.push ({
                                        name: 'account'
                                    }, onComplete => {}, onAbort => {})
                                }else if(roleType === '2'){
                                    this.$router.push ({
                                        name: 'sysInit'
                                    }, onComplete => {}, onAbort => {})
                                }else{
                                    this.$router.push ({
                                        name: 'logs'
                                    }, onComplete => {}, onAbort => {})
                                }

                            } else {
                                this.msg = response.message
                                this.btnLoading = false
                            }
                        }).catch (e => {
                            this.$message.error ('后台系统异常')
                        })
                    } else {
                        setTimeout (() => {
                            this.btnLoading = false
                        }, 600)
                    }
                })
            }
        },
        created () {
            this.init ()
            let _this = this
            setTimeout (function () {
                _this.$refs[ 'refocus' ].focus ()
            }, 200)
        },
        /**
         * 组件销毁前处理
         */
        beforeDestroy () {
        }
    }
</script>
<style lang="less">
    @import '~assets/login.less';
</style>
